<template>
    <div>
        <!-- nav导航栏 -->
        <NAV></NAV>
        <div class="banner">
            <div class="banner-bg">
                <h1 class="banner-h1 animate__animated animate__bounce animate__infinite">hello,欢迎来到冬冬的个人博客</h1>
                <p class="banner-p animate__animated animate__bounce animate__infinite">冬冬的秘密基地，被你发现了吗！</p>
                <!-- animate__wobble -->
                <el-backtop :right="100" :bottom="100" />
            </div>
        </div>
        <div class="container">
            <div class="left-container"></div>
            <div class="center-container" >
                <el-card class="box-card" v-for="(item, index) in list" :key="index" @click="itemSkip(item)">
                    <template #header>
                        <div class="card-header">
                            <span>{{ item.title }}</span>
                        </div>
                    </template>
                    <div v-html="item.content"></div>
                </el-card>
            </div>

            <div class="right-container">
                <el-card class="card">
                    <div>Card-content</div>
                </el-card>

                <el-card class="card">
                    <div>Card-content</div>
                    <div>Card-content</div>
                    <div>Card-content</div>
                    <div>Card-content</div>
                    <div>Card-content</div>
                    <div>Card-content</div>
                    <div>Card-content</div>
                    <div>Card-content</div>
                </el-card>

                <el-card class="card">
                    <div>Card-content</div>
                    <div>Card-content</div>
                    <div>Card-content</div>
                    <div>Card-content</div>
                </el-card>
            </div>
        </div>
        <div class="footer">

        </div>
    </div>

</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { RouterLink, RouterView, useRouter  } from 'vue-router'
import NAV from '@/compont/nav.vue'
type itemList = [
    {
        title: String,
        content: String
    }
]

const list = reactive([
    {
        title: '这是冬冬的第一篇文章',
        content: '<p style="color="red"; font-size="25px"">该组件无需强制搭配checkboxGroup组件使用(视情况而定)，可以单个独立使用u-checkbox组件</p>'
    },
    {
        title: '这是冬冬的第二篇文章',
        content: '<p style="color="red"; font-size="25px"">该组件无需强制搭配checkboxGroup组件使用(视情况而定)，可以单个独立使用u-checkbox组件</p>'
    },
    {
        title: '这是冬冬的第三篇文章',
        content: '<p style="color="red"; font-size="25px"">该组件无需强制搭配checkboxGroup组件使用(视情况而定)，可以单个独立使用u-checkbox组件</p>'
    },
    {
        title: '这是冬冬的第四篇文章',
        content: '<p style="color="red"; font-size="25px"">该组件无需强制搭配checkboxGroup组件使用(视情况而定)，可以单个独立使用u-checkbox组件</p>'
    },
])

const itemSkip = (item:any) => {
    console.log(item)
}

</script>

<style lang="less" scoped>
.banner {
    width: 100%;
    height: 500px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-top: 80px;
    // border: 5px solid rgba(255, 255, 255, );

    .banner-bg {
        .banner-h1 {
            text-align: center;
            color: rgba(255, 255, 255, 1);
            padding-top: 100px;
            font-size: 38px;
        }

        .banner-p {
            text-align: center;
            color: rgba(255, 255, 255, 1);
            font-size: 18px;
        }
    }
}

.container {
    display: flex;
    width: 100%;
    height: 100%;

    .left-container {
        width: 20%;
        flex: 2;
    }

    .center-container {
        width: 50%;
        flex: 5
    }

    .right-container {
        width: 30%;
        flex: 3;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .box-card {
        width: 80%;
        margin-bottom: 50px;
        cursor:pointer;
    }
    .box-card:hover {
        border: 10px solid #b1abab;
    }

    .right-container {
        .card {
            width: 250px;
            margin-bottom: 50px;
        }
    }
}

.footer {
    width: 100%;
    height: 200px;
    background-color: dimgray;
    margin-top: 50px;
}
</style>
